<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>原价：{{price}}</h1>
        <h1>计算属性价格：{{changePrice}} </h1>
        <h1>侦听器价格VIP：{{VIPPrice}} </h1>
        <h1 id="svip">侦听器价格SVIP：{{SVIPPrice}} </h1>
        <button @click="price=1000">修改 price</button>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                price: 100,
                VIPPrice: 0,
                SVIPPrice: 0
            }
        },
        methods: {},
        computed: {
            changePrice() {
                return this.price * 0.95
            }
        },
        // watch 是侦听器的选项
        watch: {
            // 侦听器的名字就是我们要监听的属性名字
            // price(newPrice, oldPrice) {
            //     // newPrice 是最新值
            //     // oldPrice 原来值
            //     console.log(newPrice, oldPrice);
            //     // 侦听器可以使用异步操作
            //     setTimeout(() => {
            //         this.VIPPrice = newPrice * 0.6
            //         this.SVIPPrice = newPrice * 0.1
            //     }, 1000);
            // }

            price: {
                handler(newPrice, oldPrice) {
                    this.VIPPrice = newPrice * 0.6
                    this.SVIPPrice = newPrice * 0.1

                    // console.log(document.querySelector('#svip').innerText);
                },
                // 配置是否深层监听，监听引用类型的数据
                /*
                    谨慎使用:
                        深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。
                        因此请只在必要时才使用它，并且要留意性能。
                */
                deep: false,
                // 强制立即执行回调（配置非惰性）
                immediate: true,
                // 该配置指明侦听器会在真实 DOM 更新之后执行，同 nextTick 功能一致
                flush: 'post'
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')


    /*
        计算属性：
        1、运行会立即执行一次(非惰性)
        2、计算属性是有缓存
        3、计算属性一次可以监听多个值，多个值影响一个只
        4、计算属性是不支持异步的
        5、计算属性需要 return 出一个值

        侦听器：
        1、运行不会立即执行一次(具有惰性)
        2、侦听器不具备缓存
        3、侦听器一次只能监听一个值，一个值影响多个值
        4、侦听器可以支持异步
        5、侦听器不需要返回值

    */

</script>

</html>